.layout {
    margin-top: 16px;
    box-sizing: border-box;
    background-color: #ffff;
    border: 1px solid #e4e7ed;
    border-radius: 4px;

    .title {
        padding: 17px 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #eaeaea;

        .title-label {
            display: flex;
            align-items: center;
            font-size: 16px;
            font-family: PingFangSC-Medium, 'PingFang SC';
            font-weight: 500;
            color: #33302d;
            line-height: 22px;

            .title-label-text-icon {
                display: inline-flex;
                margin-left: 8px;
                align-items: center;
                cursor: pointer;

                img {
                    width: 16px;
                    height: 16px;
                    margin-right: 2px;
                }
            }
        }

        .title-right {
            display: flex;
            align-items: center;

            :deep(.el-date-editor) {
                width: 312px;
                box-sizing: border-box;
            }
        }
    }

    .tab-list {
        margin: 24px !important;
        gap: 16px;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)) minmax(240px, 1fr);

        .tab-item {
            padding: 0 !important;
            flex: 0 0 196px;
            width: 100%;

            .tab-item-content {
                width: 100%;
                box-sizing: border-box;
                padding: 16px 24px;
                height: 90px;
                border-radius: 4px;
                background: #f9f9f9;
                cursor: pointer;

                &:hover {
                    box-shadow: 0 2px 24px 0 rgb(0 0 0 / 12%);
                }
            }

            .tab-item-name {
                font-size: 14px;
                font-family: PingFangSC-Regular, 'PingFang SC';
                font-weight: 400;
                color: #666;
                line-height: 20px;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                white-space: normal;
                text-overflow: ellipsis;
                overflow: hidden;
            }

            .tab-item-num {
                padding-top: 8px;
                height: 30px;
                font-size: 30px;
                font-family: HelveticaNeue-Medium, HelveticaNeue;
                font-weight: 500;
                color: #33302d;
                line-height: 30px;
            }

            &:last-child {
                position: relative;
            }
        }

        .tab-item-more {
            position: absolute;
            left: calc(100% + 24px);
            top: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            height: 90px;
            border-radius: 4px;
            text-align: center;
            line-height: 90px;
            cursor: pointer;

            .tab-item-more-circle {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 24px;
                height: 24px;
                box-sizing: content-box;
                border-radius: 50%;
                background-color: #ccc;
            }

            &:hover .tab-item-more-circle {
                box-shadow: 0 2px 24px 0 rgb(0 0 0 / 12%);
            }
        }

        .tab-item-active .tab-item-content {
            background: #fdefe5;
            border: 1px solid #ff6b00;
            border-radius: 4px;

            .tab-item-name {
                color: #ff6b00;
            }

            .tab-item-num {
                color: #ff6b00;

                :deep(.column-card-units) {
                    color: #ff6b00;
                }
            }
        }
    }

    .head-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .chart_line {
        width: 100%;
        height: 400px;
    }
}

.chart_box {
    padding: 16px;
}

:global(.el-popper.group-statistics-desc-tootip) {
    max-width: none;
}

// 换行的方案
//⚠️ 一定要注意，提交本页面的时候。eslint会把下面的代码重新格式化，会导致某些浏览器失效
// 处理屏幕在1920的情况下，最后一个卡片宽度仍然是当作196px的问题
// 具体原因是gird布局,1920的情况使用flex布局即可
@media screen and (min-width: 1920px) {
    .layout {
        .tab-list {
            width: calc(100% - 96px);
            box-sizing: border-box;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
        }
    }
}

// 处理屏幕在1860的情况下，最后一个卡片宽度仍然是当作196px的问题
// 具体原因是gird布局,1920的情况使用flex布局即可
@media screen and (min-width: 1861px) and (max-width: 1919px) {
    .layout {
        .tab-list {
            .tab-item {
                &:last-child {
                    .tab-item-content {
                        width: 196px;
                    }

                    .tab-item-more {
                        left: calc(100% - 24px);
                    }
                }
            }
        }
    }
}
